<template>
  <div>
    <div class="qysl_class">
      <div class="topTitle df aic">
        <div class="numBox" v-for="(item,index) in 5" :key="index">{{index}}</div>
        <span class="cf fwBlod fs28">家</span>
      </div>
      <div class="df aic ml30">
        <div
          class="mr10 mt70 tac"
          v-for="(item, index) in chartData"
          :key="index"
          @click="clickBubble(item)"
        >
          <waterPoloChart
            :chartData="item"
            :chartHeight="item.chartHeight"
            :chartWidth="item.chartWidth"
          ></waterPoloChart>
          <div class="mt5" :style="{
            fontSize:item.size
          }">{{item.name}}</div>
        </div>
      </div>

      <div class="qusl_cont">
        <div class="df aic ml20 pt30">
          <img src="@/assets/government/lnputSupervision/super_15.png" />
          <img class="ml10" src="@/assets/government/lnputSupervision/super_14.png" />
        </div>

        <div class="df aic fww jcsa pl20 pr20">
          <div class="mt20 ct_NumbBox" v-for="item in 4" :key="item">179</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import waterPoloChart from "./waterPoloChart.vue";
export default {
  components: {
    waterPoloChart
  },
  data() {
    return {
      chartData: [
        {
          value: [0, 0, 0],
          color: [
            "rgba(0, 114, 255,0.1)",
            "rgba(0, 114, 255,0.5)",
            "rgba(0, 114, 255, 76)"
          ],
          name: "肥料",
          chartHeight: "70px",
          chartWidth: "70px",
          title: "肥料",
          cat: "0%",
          size: "16px",
          bgColor: "rgba(0, 114, 255,0.6)"
        },
        {
          value: [0.24, 0.24, 0.24],
          name: "饲料",
          color: [
            "rgba(95, 244, 201,0.1)",
            "rgba(95, 244, 201,0.5)",
            "rgba(95, 244, 201)"
          ],
          chartHeight: "89px",
          chartWidth: "89px",
          title: "饲料",
          cat: "24%",
          size: "20px",
          bgColor: "rgba(95, 244, 201,0.6)"
        },
        {
          value: [0.76, 0.76, 0.76],
          name: "农药",
          color: [
            "rgba(238, 107, 59,0.1)",
            "rgba(242, 136, 76,0.5)",
            "rgba(242, 136, 76)"
          ],
          chartHeight: "109px",
          chartWidth: "109px",
          title: "农药",
          cat: "76%",
          size: "24px",
          bgColor: "rgba(242, 136, 76,0.6)"
        },
        {
          value: [0.5, 0.5, 0.5],
          name: "兽药",
          color: [
            "rgba(213, 91, 91,0.1)",
            "rgba(213, 91, 91,0.5)",
            "rgba(213, 91, 91)"
          ],
          chartHeight: "89px",
          chartWidth: "89px",
          title: "兽药",
          cat: "50%",
          size: "20px",
          bgColor: "rgba(213, 91, 91,0.6)"
        },
        {
          value: [0, 0, 0],
          name: "种子",
          color: [
            "rgba(253, 229, 101,0.1)",
            "rgba(253, 229, 101,0.5)",
            "rgba(253, 229, 101)"
          ],
          chartHeight: "70px",
          chartWidth: "70px",
          title: "种子",
          cat: "0%",
          size: "16px",
          bgColor: "rgba(253, 229, 101,0.6)"
        }
      ],
      knoChartTitle: "有理数",
      title: "整数",
      progressBarWidth: "50%" //进度条占比
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.tac {
  text-align: center;
}
.cFFF44A {
  color: #fff44a;
}
.qysl_class {
  text-align: center;
  width: 551px;
  height: 638px;
  background-image: url(".././../../../assets/government/lnputSupervision/super_3.png");
  background-repeat: no-repeat;
  background-size: 551px;
  position: relative;
  .topTitle {
    position: absolute;
    top: 6px;
    right: 20px;
    .numBox {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 28px;
      color: #ffffff;
      text-align: center;
      line-height: 30px;
      width: 28px;
      height: 30px;
      background: #0072ff;
      border-radius: 4px;
      margin-right: 5px;
    }
  }
  .qusl_cont {
    width: 509px;
    height: 369px;
    background-image: url(".././../../../assets/government/lnputSupervision/super_11.png");
    background-repeat: no-repeat;
    background-size: 509px;
    margin-left: 20px;
    margin-top: 20px;
    text-align: center;
    img {
      width: 228px;
      height: 84px;
    }
    .ct_NumbBox {
      width: 194px;
      height: 99px;
      background-image: url(".././../../../assets/government/lnputSupervision/super_1.png");
      background-repeat: no-repeat;
      background-size: 194px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 26px;
      color: #fff;
      line-height: 110px;
      text-shadow: 0px 3px 7px rgba(6, 9, 29, 0.6);
    }
  }
}
.fwBlod {
  font-weight: bold;
}
.fs28 {
  font-size: 24px;
}
</style>
